import { View, Image, Text } from '@tarojs/components';
import { AtIcon } from 'taro-ui';
import './style.scss';

/**
 * 会员卡权益
 * @returns
 */
const CardInterest = ({ list }) => {
  return (
    <View className="vipcard-interest-wrap">
      <View className="interest-title">我的卡项权益</View>
      <View className="interest-list-wrap">
        {list.map((item, index) => (
          <View key={index} className="interest-item">
            <View className="item-left">
              <Image mode="aspectFit" src={item.pic_url} />
              <View className="text-desc">
                <Text className="title">{item.name}</Text>
                <View className="price-info">
                  <Text className="price">￥{item.retail_price}</Text>
                  <Text className="count">
                    {' '}
                    已用次数：{item.used_number}/{item.number}
                  </Text>
                </View>
              </View>
            </View>
            {/* <AtIcon value="chevron-right" size={14} color="#ccc" /> */}
          </View>
        ))}
      </View>
    </View>
  );
};
export default CardInterest;
